<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GS下拉选择框</title>

<script src="./scripts/jquery-1.3.2.min.js" language="JavaScript" type="text/javascript"></script>
<script src="./scripts/groupselect.js" language="JavaScript" type="text/javascript"></script>
<link href="./styles/groupselect.css" rel="stylesheet" type="text/css" />

<script language="JavaScript" type="text/javascript" >
	
$(document).ready(function(){  		
  getstaticdata = groupselect(staticParameters);		
  getactivedata = groupselect(activeParameters);	
							
});

var getactivedata; //取结果	
var getstaticdata; //取结果	

var activeParameters = {
		'frameId':'al-groupselect-active',//div的ID，控件将于此div内生成
		'needactive':true,//是否需要动态提示，比如首字母输入
		'checkmax':true,//是否需要最大数目限制
		'maxcount':30,//最大选择数
		'ajaxRequestUrl':
			{'group':'/groupServlet',//请求group数据的url
			 'item':'/itemServlet',//请求item的url
			 'active':'/activeServlet'//请求active对应数据的url
		    },
			//如果不为空 发起ajax 请求，请求数据, (数据为json格式)
		'ajaxRequestKey':
			{'groupid':'id','activetext':'text'},
			//如果发起ajax 请求，提交的参数使用此key，groupid为取此group下的item, activetext为动态输入内容
		'getStaticData':
			{'activeData':'',//函数，如果不使用ajax则从此取得active对应的数据，提供输入text参数
			 'groupData':'',//函数，如果不使用ajax则从此取得Group数据
			 'itemData':''//函数，如果不使用ajax则从此取得Item数据，提供组id			
			},
		'img':
			{'downOver':'./images/downover.gif',//down focus
			 'downOut':'./images/downout.gif',//down blur
			 'upOver':'./images/upover.gif',//up focus
			 'upOut':'./images/upout.gif'//up blur
			},
		'message':
			{'imgTitle':'选择',
			 'select':'请选择',
			 'buttonOK':'确定',
			 'active1':'请输入姓名',
			 'active2':'请输入姓名(支持拼音首字母输入)',
			 'active3':'姓名不在列表哦，请重新输入',
			 'noactive':'请从下拉菜单中选择！',
			 'max1':'最多只能选择',
			 'max2':'个用户！',
			 'result':'请选择！',
			 'group':'切换后将清空你刚才勾选的项目，你确定要切换吗？'
			}
		};

var staticParameters = {
		'frameId':'al-groupselect-static',//div的ID，控件将于此div内生成
		'needactive':true,//是否需要动态提示，比如首字母输入
		'checkmax':true,//是否需要最大数目限制
		'maxcount':30,//最大选择数
		'ajaxRequestUrl':
			{'group':'',//请求group数据的url
			 'item':'',//请求item的url
			 'active':''//请求active对应数据的url
		    },
			//如果不为空 发起ajax 请求，请求数据, (数据为json格式)
		'ajaxRequestKey':
			{'groupid':'id','activetext':'text'},
			//如果发起ajax 请求，提交的参数使用此key，groupid为取此group下的item, activetext为动态输入内容
		'getStaticData':
			{'activeData':getActiveData,//函数，如果不使用ajax则从此取得active对应的数据，提供输入text参数
			 'groupData':getGroupData,//函数，如果不使用ajax则从此取得Group数据
			 'itemData':getItemData//函数，如果不使用ajax则从此取得Item数据，提供组id			
			},
		'img':
			{'downOver':'./images/downover.gif',//down focus
			 'downOut':'./images/downout.gif',//down blur
			 'upOver':'./images/upover.gif',//up focus
			 'upOut':'./images/upout.gif'//up blur
			},
		'message':
			{'imgTitle':'选择好友',
			 'select':'请选择好友',
			 'buttonOK':'确定',
			 'active1':'请输入好友的姓名',
			 'active2':'请输入好友的姓名(支持拼音首字母输入)',
			 'active3':'姓名不在好友列表哦，请重新输入',
			 'noactive':'请从下拉菜单中选择！',
			 'max1':'最多只能选择',
			 'max2':'个用户！',
			 'result':'请选择要添加到当前分组的好友！',
			 'group':'切换分组后将清空你刚才勾选的好友，你确定要切换分组吗？'
			}
		};

function getActiveData(text){
		var arr = [
		  		{'id':'3634','name':'边峰'},
				{'id':'123123','name':'艳'},
				{'id':'1349195','name':'勇'},
				{'id':'123123','name':'婷'}
			];
	return arr;			
}

  function getItemData(id){
	    var arr = [			
	  		  		{'id':'345345','name':'边峰'},
					{'id':'346346','name':'艳'},
					{'id':'345345','name':'勇'},
					{'id':'345345','name':'婷'},
					{'id':'345345','name':'亮'},
					{'id':'678867','name':'郭梅'},
					{'id':'678668','name':'何'},
					{'id':'67867','name':'侯'}	
				];
	
		return arr;			
}

function getGroupData(){
		var arr = 	[ {'id':'all','name':'全部好友'},
					{'id':'234','name':'现在同事'},
					{'id':'23452','name':'以前同事'},
					{'id':'234','name':'大学同学'},
					{'id':'234234','name':'高中同学'},
					{'id':'235423','name':'家人亲戚'},
					{'id':'234234','name':'普通朋友'}
					];
			return arr;
	  	}
			


function getresultactive(){
	alert('你选的是： ' + getactivedata());
}
function getresultstatic(){
	alert('你选的是： ' + getstaticdata());
}	
</script>

</head>
<body>
<h1>GS----欢迎使用GroupSelect!------GS</h1>

<br />
<br />
<div>
<p>通过Ajax动态获取数据</p>
<div id="al-groupselect-active" border=1>	
</div>
<div class="l" style="padding-left:10px;">
	<input type=button value="结果" onclick="getresultactive();" style="padding:2px 5px;height:26px;">
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<div>
<p>通过函数获取数据</p>
<div id="al-groupselect-static" >	
</div>
<div class="l" style="padding-left:10px;">
	<input type=button value="结果" onclick="getresultstatic();" style="padding:2px 5px;height:26px;">
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<a href="http://al-groupselect.appspot.com">Demo：http://al-groupselect.appspot.com</a><br />
<a href="http://code.google.com/p/groupselect/">Code：http://code.google.com/p/groupselect</a>
<p>Powered by：alzhang. GroupSelect 0.1 </p>

</body>
</html>

